<template>
  <view class="demo-container">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show1 = true">基础用法</fu-button>
        <fu-action-sheet
          v-model:show="show1"
          :actions="actions1"
          @select="onSelect"
          @cancel="onCancel"
        />
      </view>
    </view>
    
    <!-- 展示取消按钮 -->
    <view class="demo-block">
      <view class="demo-block__title">展示取消按钮</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show2 = true">展示取消按钮</fu-button>
        <fu-action-sheet
          v-model:show="show2"
          :actions="actions2"
          cancel-text="取消"
          @select="onSelect"
          @cancel="onCancel"
        />
      </view>
    </view>
    
    <!-- 展示描述信息 -->
    <view class="demo-block">
      <view class="demo-block__title">展示描述信息</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show3 = true">展示描述信息</fu-button>
        <fu-action-sheet
          v-model:show="show3"
          :actions="actions3"
          title="标题"
          description="这是一段描述信息"
          cancel-text="取消"
          @select="onSelect"
          @cancel="onCancel"
        />
      </view>
    </view>
    
    <!-- 选项状态 -->
    <view class="demo-block">
      <view class="demo-block__title">选项状态</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show4 = true">选项状态</fu-button>
        <fu-action-sheet
          v-model:show="show4"
          :actions="actions4"
          cancel-text="取消"
          @select="onSelect"
          @cancel="onCancel"
        />
      </view>
    </view>
    
    <!-- 自定义内容 -->
    <view class="demo-block">
      <view class="demo-block__title">自定义内容</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show5 = true">自定义内容</fu-button>
        <fu-action-sheet
          v-model:show="show5"
          title="标题"
          cancel-text="取消"
        >
          <view class="custom-content">
            <view class="custom-content__title">自定义内容</view>
            <view class="custom-content__text">这是一段自定义内容</view>
          </view>
        </fu-action-sheet>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      actions1: [
        { name: '选项一' },
        { name: '选项二' },
        { name: '选项三' }
      ],
      actions2: [
        { name: '选项一' },
        { name: '选项二' },
        { name: '选项三' }
      ],
      actions3: [
        { name: '选项一' },
        { name: '选项二' },
        { name: '选项三' }
      ],
      actions4: [
        { name: '着色选项', color: '#ee0a24' },
        { name: '禁用选项', disabled: true },
        { name: '加载选项', loading: true }
      ]
    }
  },
  methods: {
    onSelect(item, index) {
      uni.showToast({
        title: `点击选项${index + 1}`,
        icon: 'none'
      })
    },
    onCancel() {
      uni.showToast({
        title: '点击取消',
        icon: 'none'
      })
    },
    onCustomClick() {
      this.show5 = false
      uni.showToast({
        title: '点击确定',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20rpx;
}

.demo-block {
  margin-bottom: 30rpx;
  
  &__title {
    margin-bottom: 20rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
  }
  
  &__content {
    background-color: #fff;
    border-radius: var(--fu-radius-base);
    overflow: hidden;
    padding: 30rpx;
  }
}

.custom-content {
  padding: 32rpx;
  
  &__title {
    font-size: 32rpx;
    font-weight: 500;
    color: var(--fu-text-color);
    text-align: center;
    margin-bottom: 16rpx;
  }
  
  &__text {
    font-size: 28rpx;
    color: var(--fu-text-color-secondary);
    text-align: center;
    margin-bottom: 32rpx;
  }
  
  &__button {
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    font-size: 32rpx;
    color: var(--fu-primary-color);
    background: #fff;
    border-radius: var(--fu-radius-base);
    
    &:active {
      background-color: #f2f3f5;
    }
  }
}
</style> 